<template>
  <view class="demo-drag-popup">
    <!-- 打开按钮 -->
    <button class="demo-button" @tap="show = true">
      打开弹框
    </button>
    
    <!-- 可拖动弹框 -->
    <fu-drag-popup
      :show="show"
      :content-height="600"
      @close="show = false"
    >
      <view class="demo-content">
        <view class="demo-title">标题</view>
        <view class="demo-text">这是一个可以拖动关闭的底部弹框</view>
        <view class="demo-list">
          <view 
            v-for="i in 20" 
            :key="i"
            class="demo-item"
          >
            列表项 {{ i }}
          </view>
        </view>
      </view>
    </fu-drag-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style lang="scss">
.demo-drag-popup {
  padding: 30rpx;
}

.demo-button {
  margin-bottom: 30rpx;
}

.demo-content {
  padding: 0 30rpx 30rpx;
}

.demo-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.demo-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.demo-item {
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}
</style> 